<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/animate.css">
    <style>
    body {
        background: #cccccc;
       text-align: center;
       padding-top: 100px;
    }
    .key {
        font-size: 186px;
        color: chartreuse;
        margin-bottom: 30px;
    }
    .jisuan {
        font-size: 46px;
        color:darkgoldenrod;
    }

    </style>
</head>
<body>
    <div class="key">aa</div>
    <div class="jisuan">aaaa</div>
</body>
<script>
var key = document.querySelector('.key');
var jisuan = document.querySelector('.jisuan');
var random;
var correct = 0, error = 0;
function randomChar() {
    random = Math.random();
    random = Math.floor(random * 26) + 65;
    var char = String.fromCharCode(random);
    key.classList.add('zoomIn');
    setTimeout(function () {
        key.classList.remove('zoomIn'); 
    },500);
    key.innerHTML = char;
}
randomChar();
function showRet() {
    var rate = (correct / (correct + error) * 100 || 0).toFixed(2);
    var result = '正确数是：' + correct + ',错误数是：' + error + ',正确率：' + rate + '%';
}

</script>
</html>